<template>
  <div class="RoomType-Container">
    <div class="add">
      <el-button @click="showForm('add')">新增房间类型</el-button>
    </div>
    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules">
        <el-form-item label="类型号" :label-width="formLabelWidth" prop="typeNum">
          <el-input v-model="form.typeNum" autocomplete="off" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="类型名" :label-width="formLabelWidth" prop="typeName">
          <el-input v-model="form.typeName" autocomplete="off" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="定价" :label-width="formLabelWidth" prop="typePrice">
          <el-input v-model="form.typePrice" autocomplete="off" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="类型描述" :label-width="formLabelWidth" prop="des">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="form.describe"
              maxlength="30"
              show-word-limit
              style="width: 90%"
          ></el-input>
        </el-form-item>
        <el-form-item label="支持设施" :label-width="formLabelWidth" prop="labels">
          <el-tag
              :key="tag"
              v-for="tag in form.labels"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendRoom">确 定</el-button>
      </div>
    </el-dialog>
    <div class="room-table">
      <el-table
          :data="typeData"
          border
          style="width: 100%;">
        <el-table-column
            prop="typeNum"
            label="类型号"
            align="center"
            width="100">
        </el-table-column>
        <el-table-column
            prop="typeName"
            label="类型名"
            align="center"
            width="100">
        </el-table-column>
        <el-table-column
            prop="typePrice"
            align="center"
            label="定价"
            width="100">
          <template slot-scope="scope">
            <span>￥{{ scope.row.typePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="describe"
            align="center"
            label="描述"
            width="120">
          <template slot-scope="scope">
            <el-popover
                placement="top-start"
                title="描述"
                width="200"
                trigger="click"
                :content="scope.row.des">
              <el-button slot="reference">点击查看</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="labels"
            align="left"
            label="支持设施"
            width="300">
          <template slot-scope="scope">
            <el-tag v-for="(tag,index) in scope.row.labels.split(',')" :key="index" type="info">{{ tag }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="images"
            align="left"
            label="图片"
        >
          <template slot-scope="scope">
            <el-image
                style="height: 50px; width: 100px"
                :src="scope.row.images"
                fit="cover"
                :preview-src-list="arrayFormat(scope.row.images) || []">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            width="150"
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showForm('modify',scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteRoom(scope.row.typeId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
/**
 * HomeRoomType
 * @module '@/component/HomeHeader'
 * @desc 页面头栏
 * @author 开朗的不得了
 * @date 2023年3月5日19点41分
 * @param {Object} []    - 参数说明
 * @param {String} [] - 参数说明
 * @example
 *  <HomeRoomType/>
 **/

export default {
  name: "HomeRoomType",
  data(){
    return {
      typeData:[],
      dialogFormVisible: false,
      form: {
        typeNum: '',
        typeName: '',
        typePrice: '',
        describe:'',
        labels: [],
        images:[],
      },
      formLabelWidth: '120px',
      rules:{
        typeNum: [
          { required: true, message: '请输入类型号', trigger: 'blur' },
        ],
        typeName:[
          { required: true, message: '请选择类型名', trigger: 'blur' },
        ],
        typePrice:[
          { required: true, message: '请输入定价', trigger: 'blur' },
        ],
        describe: [
          { require: true, message: '请输入描述信息', trigger: 'blur' },
        ]
      },
      formTitle:'新增房间类型',
      formType:'',
      roomId:null,
      inputVisible: false,
      inputValue: ''
    }
  },
  computed:{
    // 获取房间类型列表数据
    getRoomTypeList(){
      return this.$store.state[1].roomTypeList || {};
    }
  },
  mounted(){
    this.getRoom();
  },
  methods:{
    // 获取房间列表数据
    getRoom(){
      this.$store.dispatch('getRoomType');
    },

    // 新增、修改房间配置
    sendRoom(){    //添加房间信息或者修改房间信息
      const typeInfo = {};
      typeInfo['typeNum'] = this.getRoomTypeList.length;
      typeInfo['typeName'] = this.form.typeName;
      typeInfo['typePrice'] = this.form.typePrice;
      typeInfo['describe'] = this.form.describe;
      typeInfo['labels'] = this.form.labels.toString();
      if(this.formType==='modify'){
        typeInfo['typeId'] = this.roomId;
        this.$store.dispatch('modifyRoomType', typeInfo);
      }else{
        this.$store.dispatch('addRoomType', typeInfo);
      }
      this.dialogFormVisible=false;
      setTimeout(()=>{this.getRoom();}, 500)
    },

    // 删除房间
    deleteRoom(typeId){
      this.$confirm('此操作将永久删除该房间信息, 是否继续?', '操作提示', {   //点击删除按钮时先弹框警告
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('deleteRoomType', {typeId});
        setTimeout(()=>{this.getRoom()}, 500)
      }).catch(()=>{})
    },

    // 打开dialog框
    showForm(type,typeRow=undefined){
      this.dialogFormVisible=true;
      this.formTitle="新增房间类型";
      if(type==='modify'){   //判断是修改房间信息还是添加房间
        this.formTitle="修改房间";
        let tmpTypeData={
          typeNum: typeRow.typeNum,
          typeName: typeRow.typeName,
          typePrice: typeRow.typePrice,
          describe: typeRow.des,
          labels: this.arrayFormat(typeRow.labels),
          images: this.arrayFormat(typeRow.images),
        };
        this.form=tmpTypeData;
        this.formType='modify';
        this.roomId=typeRow.typeId;
      }else{   //添加房间
        this.form={
          typeNum: this.getRoomTypeList.length,
          typeName: '',
          typePrice: '',
          describe:'',
          labels: [],
          images:[],
        }
        this.formType='';
      }
    },

    // 删除标签
    handleClose(tag) {
      this.form.labels.splice(this.form.labels.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.labels.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    arrayFormat(str){
      if (str == null || str == '') return '';
      return str.split(',');
    }
  },
  watch:{
    getRoomTypeList(){
      this.typeData = this.getRoomTypeList;
    }
  }
}
</script>

<style lang="less" scoped>
  .RoomType-Container{
    z-index: 100;
    width: calc(100% - 40px);
    padding: 20px;
  }
  .room-table {
    margin-top: 20px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>